<template>
    <div id="comment">
        <header>
            <ul class="clearfix">
                <li @click="back"><van-icon name="arrow-left" /></li>
                <li class="centersong">评论({{commentAll.total?commentAll.total:"0"}})</li>
                <li class="more_play"> 
                    <span class="share_black"></span>
                    <span class="in_play"></span>
                </li>
            </ul>
        </header>
        <!-- 主体内容 -->
        <div class="centent" v-if='isMoment'>
            <!-- 歌单详情 -->
            <div class="songDetail">
                <ul class="clearfix">
                    <li class="img">
                        <img :src="songSheet.coverImgUrl?songSheet.coverImgUrl:songList.coverImgUrl" alt="">
                    </li>
                    <li class="songTitle">
                        <div class="total">
                            <div class="name"><span>歌单</span>{{songSheet.name?songSheet.name:songList.name}}</div>
                            <p class="by" @click="getUser()"><span>by</span>{{songSheet.nickname?songSheet.nickname:songList.creator.nickname}}</p>
                        </div>
                    </li>
                    <li class="arrow">
                        <van-icon name="arrow" />
                    </li>
                </ul>
            </div>
            <!-- 热门评论 -->
            <div class="hotComments">
                <h3>精彩评论</h3>
                <ul  v-if="commentAll.code !==404">
                    <li v-for="(item,index) in hotCommentsList" :key="index">
                        <div class="user clearfix">
                            <div class="img">
                                <img :src="item.user.avatarUrl" alt="">
                            </div>
                            <div class="name">
                                <p>{{item.user.nickname}}</p>
                                <span>{{item.time}}</span>
                            </div>
                            <!-- 点赞 -->
                            <div class="fabulous">
                                <span>{{item.likedCount}}</span>
                                <span class="hand"></span>
                            </div>
                        </div>
                        <div class="user_comment">{{item.content}}</div>
                        <div class="reply">
                            {{index+1}}条回复<van-icon name="arrow" />
                        </div>
                    </li>
                </ul>
                <!-- 当获取不到评论时 -->
                <div class="error_msg">{{commentAll.msg}}</div>
            </div>
            <!-- 最新评论 -->
            <div class="hotComments newComments">
                <h3>最新评论<span>{{commentAll.total?commentAll.total:"0"}}</span></h3>
                <ul  v-if="commentAll.code !==404">
                    <li v-for="(item,index) in newCommentsList" :key="index">
                        <div class="user clearfix">
                            <div class="img">
                                <img :src="item.user.avatarUrl" alt="">
                            </div>
                            <div class="name">
                                <p>{{item.user.nickname}}</p>
                                <span>{{item.time}}</span>
                            </div>
                            <!-- 点赞 -->
                            <div class="fabulous">
                                <span>{{item.likedCount}}</span>
                                <span class="hand"></span>
                            </div>
                        </div>
                        <div class="user_comment">{{item.content}}</div>
                        <div class="reply">
                        </div>
                    </li>
                </ul>
                <!-- 当获取不到评论时 -->
                <div class="error_msg">{{commentAll.msg}}</div>
            </div>
        </div>
        <!-- 底部导航 -->
        <Tabbar></Tabbar>
        <!-- loading加载 -->
        <Loading v-if="isLoging" ></Loading>
    </div>
</template>
<script>
import {mapGetters,mapState,mapMutations,mapActions} from "vuex";
import { Dialog } from 'vant';
import moment from 'moment'
import Loading from '@/components/Loading.vue'
import Tabbar from '@/components/Tabbar.vue'
export default {
    name:'comment',
    data () {
        return {
            isLoging:true,//控制loading
            isMoment:false,//控制内容
            commentAll:{},//所有评论数据
            hotCommentsList:[],//热评
            newCommentsList:[],//最新评论
            songList:{},//歌单详情
            
        }
    },
    computed: {
        ...mapState(["musicDetail",'songSheet'])
    },
    components: {
      Loading,Tabbar
    },
    watch: {
        // 每点一次评论就加一
        'songSheet.count':{
            handler: function (newVal,oldVal){
                if(newVal !== oldVal){
                    this.getComment();
                }
            }
        }
    },
    methods: {
       //返回上一层
        back(){
            this.$router.go(-1);//返回上一层
        },
        //用户信息跳转
        getUser(){
            this.$router.push('/userDetail');
        },
        getComment(){
            this.isMoment = false;
            this.isLoging = true;
            this.songList = JSON.parse(sessionStorage.getItem("songSheetLists"));
            const params = {
                id:this.musicDetail.songId?this.musicDetail.songId:JSON.parse(sessionStorage.getItem("songSheetLists")).id,
                limit:100,//获取评论数
            };
            this.axios.get('/music/comment/playlist',{params:params}).then(res =>{
                if(res.data.code == 404){
                    this.commentAll = res.data;
                }else{
                    this.commentAll = res.data;
                    this.hotCommentsList = res.data.hotComments;
                    this.newCommentsList = res.data.comments;
                    // 时间戳转时间
                    this.hotCommentsList.forEach((res,index) =>{
                        res.time = moment(res.time).format().replace('T','  ').replace('+08:00','');
                    })
                    this.newCommentsList.forEach((res,index) =>{
                        res.time = moment(res.time).format().replace('T','  ').replace('+08:00','');
                    })
                    //请求数据显示内容
                   
                   setTimeout(()=>{
                        this.isMoment = true;
                        this.isLoging = false;
                   },500)
                }
                
            })
        } 
    },
    created () {
        //初始化时触发
        this.getComment();
    },
     mounted() {
    }
}
</script>
<style lang='less'>
    #comment{
        .van-loading {
            z-index: 999;
            text-align: center;
            top: 50px;
        }
        header{
                height: 50px;
                line-height: 50px;
                color: #333;
                position: relative;
                z-index: 2;
                position: fixed;
                top: 0;
                background: #fff;
                width: 100%;
                ul{
                    li{
                        width: 33.3% ;
                        color: #333;
                        float: left;
                        .van-icon{
                            margin-left: 10px;
                            font-size: 20px;
                            vertical-align: middle;
                        }
                    }
                    .centersong{
                        text-align: center;
                        font-size: 18px;
                    }
                    .more_play{
                        text-align: right;
                        span{
                            display: inline-block;
                            width: 18px;
                            height: 18px;
                            background-position: 0;
                            background-repeat: no-repeat;
                            background-size: 18px 18px;
                            vertical-align: middle;
                            margin-right: 20px;
                        }
                        .share_black{
                            background-image: url('../images/wyy/share_black.svg');
                        }
                        .in_play{
                            background-image: url('../images/wyy/in_play_black.svg');
                        }
                    }
                }
                
        }
        .centent{
            margin-top: 40px;
            .songDetail{
                padding: 15px 0 15px 15px;
                border-bottom: solid 10px #e6e3e3;
                ul{
                    height: 80px;
                    li{
                        float: left;
                        height: 100%;
                    }
                    .songTitle{
                        width: 65%;
                        position: relative;
                        .total{
                            margin-left: 10px;
                            position: absolute;
                            top: 50%;
                            transform: translate(0,-50%);
                            .name{
                                font-size: 16px;
                                span{
                                    border: solid 1px #333;
                                    font-size: 10px;
                                    margin-right: 5px;
                                    border-radius: 3px;
                                }
                            }
                             .by{
                                margin-top: 5px;
                                font-size: 14px;
                                color: #5679A8;
                                span{
                                    font-size: 10px;
                                    margin-right: 5px;
                                    padding: 2px;
                                    color: #000;
                                }
                            }

                        }
                    } 
                    .img{
                        width: 80px;
                        img{ 
                            width: 100%;
                            height: 100%;
                            border-radius: 5px;
                        }
                    }
                    .arrow{
                        float: right;
                        width: 10%;
                        text-align: center;
                        line-height: 80px;
                        i{
                            font-size: 18px;
                            color: #888;
                        }
                    }
                }
            }
            .hotComments{
                margin-top: 15px;
                padding-left:15px;
                ul{
                    li{
                        margin-top: 5px;
                        .user{
                            .img{
                                float: left;
                                img{
                                    border-radius: 50%;
                                    width: 30px;
                                    height: 30px;
                                }
                            }
                            .name{
                                float: left;
                                font-size: 12px;
                                padding-left: 5px;
                                p{
                                    font-size: 14px;
                                }
                            }
                            .fabulous{
                                float: right;
                                padding-right: 15px;
                                color: #8E8E8E;
                                .hand{
                                    margin-left: 3px;
                                    display: inline-block;
                                    width: 20px;
                                    height: 20px;
                                    background-position: 0;
                                    background-repeat: no-repeat;
                                    background-size: 18px 18px;
                                    vertical-align: middle;
                                    background-image: url('../images/wyy/zan_gary.svg');
                                    vertical-align: bottom;
                                }
                            }
                        }
                        .user_comment{
                            font-size: 16px;
                            padding-left: 35px;
                            padding-right: 15px; 
                            white-space: pre-wrap;
                        }
                        .reply{
                            margin-left: 35px;
                            font-size: 10px;
                            color: #5679A8;
                            padding-top: 3px;
                            padding-bottom: 10px;
                            border-bottom: solid 1px #efecec;
                        }
                    }
                }
                .error_msg{
                    margin-top: 10px;
                    color: red;
                }
            }
            .newComments{
                h3{
                    margin-bottom: 15px;
                    span{
                        color: #8E8E8E;
                        font-size: 10px;
                        margin-left: 5px;
                    }
                }
            }
        }
    }

</style>

